
	window.onload=function(){
		var sb = document.getElementsByClassName("smallbox")[0];
		var bb =document.getElementsByClassName("bigbox")[0];
		var to =document.getElementsByClassName("tool")[0];
		var bimg = document.getElementsByClassName("bigimg")[0];
		$(".smallbox").mouseenter(function(){
				$(".tool").css("display","block");
				$(".bigbox").css("display","block");
			});
		$(".smallbox").mouseleave(function(){
				$(".tool").css("display","none");
				$(".bigbox").css("display","none");
			});
			
		$(".smallbox").mousemove(function(e){
			var e =e || event;
			var x = e.clientX-sb.offsetLeft-to.offsetWidth/2;
			var y = e.clientY-sb.offsetTop-to.offsetHeight/2;
			console.log(x);
			if(x<0){
				x=0;
			}
			if(x>sb.offsetWidth-to.offsetWidth){
				x=sb.offsetWidth-to.offsetWidth+"px"
			}
			if(y<0){
				y=0
			}
			if(y>sb.offsetHeight-to.offsetHeight){
				y=sb.offsetHeight-to.offsetHeight+"px";
			}
			
			to.style.left = x+"px";
			to.style.top = y+"px";
			
			bimg.style.left = -4*x+"px";
			bimg.style.top = -4*y+"px";
		})
		$(".bottom img").click(function(){
			$(this).addClass("selected").siblings().removeClass("selected");
			var nowimg =$(this).attr("src");
//			$(".left_item .big images").attr("src",nowimg);
			$(".smallbox img").attr("src",nowimg);
			$(".bigbox img").attr("src",nowimg);
		})
	}
			
	
